<template>
  <Tooltip placement="top">
    <template #title>
      <span>{{ toolTipRef }}</span>
    </template>
    <ColumnHeightOutlined @click="expandAll" v-show="expandRef" />
    <VerticalAlignMiddleOutlined @click="collapseAll" v-show="!expandRef" />
  </Tooltip>
</template>
<script lang="ts" setup>
  import { Tooltip } from 'ant-design-vue';
  import { useI18n } from '@/hooks/web/useI18n';
  import { useTableContext } from '../../hooks/useTableContext';

  import { VerticalAlignMiddleOutlined, ColumnHeightOutlined } from '@ant-design/icons-vue';

  import { ref } from 'vue';

  // 自定义组件名称
  defineOptions({ name: 'CollapseSetting' });

  // 国际化
  const { t } = useI18n();

  // 表格
  const table = useTableContext();

  const expandRef = ref(false);

  const toolTipRef = ref('折叠全部');

  function expandAll() {
    table.expandAll();
    toolTipRef.value = t('common.collapseAll');
    expandRef.value = !expandRef.value;
  }

  function collapseAll() {
    table.collapseAll();
    toolTipRef.value = t('common.expandAll');
    expandRef.value = !expandRef.value;
  }
</script>
